<template>
  <section id="match" class="py-16 bg-gray-50">
    <div class="container mx-auto px-4">
      <div class="text-center mb-12" style="text-align: center;">
        <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4 text-primary"
          style="font-size: 30px; font-weight: bold;">匹配组队</h2>
        <p class="text-gray-600 max-w-2xl mx-auto" style="font-size: 16px; color: #666;">通过多种方式找到适合你的学习小组，一起进步</p>
      </div>

      <el-row :gutter="20">
        <el-col :xs="24" :md="8">
          <el-card shadow="hover" class="custom-card transition-all transform hover:-translate-y-1 flex flex-col p-0">
            <template #header>
              <div class="flex justify-between">
                <img src="https://picsum.photos/id/24/600/400" alt="AI 匹配进队" class="card-img-full">
              </div>
            </template>
            <div class="card-center-content flex-1 flex flex-col items-center justify-center w-full px-6">
              <div class="text-gray-600 mb-4 text-center">
                根据你的学习进度和偏好，AI将为你推荐最合适的学习小组
              </div>
              <!-- 删除选择章节提示 -->
              <el-button type="primary"
                class="main-action-btn w-[260px] h-[48px] flex items-center justify-center mx-auto" @click="aiMatch">
                <i class="fa fa-magic mr-2"></i> A I 匹配进队
              </el-button>
            </div>
          </el-card>
        </el-col>

        <!-- AI 推荐组队 -->
        <el-col :xs="24" :md="8">
          <el-card shadow="hover" class="custom-card transition-all transform hover:-translate-y-1 flex flex-col p-0">
            <template #header>
              <div class="flex justify-between">
                <img src="https://picsum.photos/id/180/600/400" alt="AI 推荐组队" class="card-img-full">
              </div>
            </template>
            <div class="card-center-content flex-1 flex flex-col items-center justify-center w-full px-6">
              <div class="text-gray-600 mb-4 text-center">
                基于你的学习历史和兴趣，AI为你推荐最适合的学习小组
              </div>
              <el-button type="primary"
                class="main-action-btn w-[260px] h-[48px] flex items-center justify-center mx-auto"
                @click="fetchRecommendedTeams">
                <i class="fa fa-thumbs-up mr-2"></i> 获取推荐小组
              </el-button>
              <div v-if="recommendedTeams.length > 0" class="mt-4 w-full">
                <h4 class="font-medium mb-2 text-center">推荐小组</h4>
                <div class="space-y-2">
                  <div class="p-3 border rounded-lg flex items-center justify-between"
                    v-for="team in recommendedTeams.slice(0, 2)" :key="team.id">
                    <div>
                      <div class="font-medium">{{ team.teamName }}</div>
                      <div class="text-sm text-gray-500">{{ team.memberCount }} 人 · {{ team.learnChapter }}</div>
                    </div>
                    <button class="px-3 py-1 bg-primary/10 text-primary rounded hover:bg-primary/20 transition-colors">
                      申请加入
                    </button>
                  </div>
                </div>
                <div class="text-center mt-3">
                  <a href="#" class="text-primary hover:underline">查看更多</a>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>

        <!-- 关键字搜索组队 -->
        <el-col :xs="24" :md="8">
          <el-card shadow="hover" class="custom-card transition-all transform hover:-translate-y-1 flex flex-col p-0">
            <template #header>
              <div class="flex justify-between">
                <img src="https://picsum.photos/id/201/600/400" alt="关键字搜索组队" class="card-img-full">
              </div>
            </template>
            <div class="card-center-content flex-1 flex flex-col items-center justify-center w-full px-6">
              <div class="text-gray-600 mb-4 text-center">
                输入你感兴趣的学习内容，找到相关的学习小组
              </div>
              <el-button type="primary"
                class="main-action-btn w-[260px] h-[48px] flex items-center justify-center mx-auto"
                @click="showSearchDialog = true">
                <i class="fa fa-search"></i>
              </el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 创建组队房间 -->
      <div class="create-team-card transition-all transform hover:-translate-y-1 hover:shadow-xl" style="width: 100%;margin: 20px 0;border-radius: 10px;border: 1px solid #f2f3f6;">
        <div class="mt-12 bg-white rounded-xl p-8 shadow-lg">
          <div class="flex flex-col md:flex-row items-center justify-between">
            <div class="md:w-2/3 mb-6 md:mb-0" style="display: flex;">
              <div style="width: 60%;padding-left: 20px;padding-bottom: 10px;">
                <h3 class="text-2xl font-bold mb-3">创建自己的学习小组</h3>
                <p class="text-gray-600 mb-4">如果你有明确的学习目标和计划，可以创建自己的学习小组，邀请志同道合的伙伴加入</p>
                <li class="flex items-start" style="list-style: none;">
                  <i class="fa fa-check-circle text-success mt-1 mr-2" style="color: #00b42b;"></i>
                  <span>完全掌控小组学习内容和进度</span>
                </li>
                <li class="flex items-start" style="list-style: none;">
                  <i class="fa fa-check-circle text-success mt-1 mr-2" style="color: #00b42b;"></i>
                  <span>自由选择和邀请小组成员</span>
                </li>
                <li class="flex items-start" style="list-style: none;">
                  <i class="fa fa-check-circle text-success mt-1 mr-2" style="color: #00b42b;"></i>
                  <span>组织专属的学习活动和讨论</span>
                </li>
              </div>
              <div class="md:w-1/3 md:pl-8 flex justify-center w-full md:justify-end" style="width: 40%;justify-content: center;align-items: center;display: flex;">
                <el-button type="primary" class="main-action-btn w-[200px] h-[48px] flex items-center justify-center"
                  @click="showCreateTeamDialog = true">
                  创建小组
                </el-button>
              </div>
            </div>
          </div>
          <div>
          </div>
        </div>
      </div>

      <!-- 创建小组弹窗 -->
      <el-dialog v-model="showCreateTeamDialog" title="创建学习小组" width="400px" :close-on-click-modal="false">
        <el-form :model="createTeamForm" label-width="100px">
          <el-form-item label="小组名称">
            <el-input v-model="createTeamForm.teamName" placeholder="请输入小组名称"></el-input>
          </el-form-item>
          <el-form-item label="学习章节">
            <el-select v-model="createTeamForm.learnChapter" placeholder="请选择学习章节">
              <el-option v-for="chapter in chapters" :key="chapter.value" :label="chapter.label"
                :value="chapter.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="开放状态">
            <el-radio-group v-model="createTeamForm.isOpen">
              <el-radio :label="1">开放</el-radio>
              <el-radio :label="0">邀请制</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button @click="showCreateTeamDialog = false">取消</el-button>
          <el-button type="primary" @click="createTeam">创建小组</el-button>
        </template>
      </el-dialog>
    </div>
  </section>
  <!-- 搜索弹窗 -->
  <el-dialog v-model="showSearchDialog" title="搜索学习小组" width="400px" :close-on-click-modal="false">
    <div class="flex flex-col gap-4">
      <el-input v-model="searchKeyword" placeholder="请输入关键字"></el-input>
      <el-button type="primary" @click="searchTeams">搜索</el-button>
      <div v-if="searchResults.length > 0">
        <h4 class="font-medium mb-2 text-center">搜索结果</h4>
        <div class="space-y-2">
          <div class="p-3 border rounded-lg flex items-center justify-between" v-for="team in searchResults.slice(0, 2)"
            :key="team.id">
            <div>
              <div class="font-medium">{{ team.teamName }}</div>
              <div class="text-sm text-gray-500">{{ team.memberCount }} 人 · {{ team.learnChapter }}</div>
            </div>
            <button class="px-3 py-1 bg-success/10 text-success rounded hover:bg-success/20 transition-colors">
              查看详情
            </button>
          </div>
        </div>
        <div class="text-center mt-3">
          <a href="#" class="text-success hover:underline">查看更多</a>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage, ElLoading } from 'element-plus';

const selectedChapter = ref('');
const chapters = ref([
  { value: 'html', label: 'HTML基础' },
  { value: 'css', label: 'CSS进阶' },
  { value: 'javascript', label: 'JavaScript高级' },
  { value: 'vue', label: 'Vue.js框架' },
  { value: 'react', label: 'React框架' },
  { value: 'node', label: 'Node.js后端' }
]);
const recommendedTeams = ref([]);
const searchKeyword = ref('');
const searchResults = ref([]);
const createTeamForm = ref({
  teamName: '',
  learnChapter: '',
  isOpen: 1
});
const showSearchDialog = ref(false);
const showCreateTeamDialog = ref(false);

const aiMatch = async () => {
  if (!selectedChapter.value) {
    ElMessage.warning('请选择你的学习章节');
    return;
  }

  try {
    ElLoading.service({
      lock: true,
      text: 'AI正在为你匹配最佳学习小组...',
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 0.7)'
    });

    await new Promise(resolve => setTimeout(resolve, 1500));

    const mockResponse = {
      code: 200,
      data: {
        team: {
          id: 1,
          teamName: '前端开发精英小组',
          learnChapter: 'Vue.js框架',
          memberCount: 8,
          captain: '张大神',
          progress: 75
        }
      }
    };

    if (mockResponse.code === 200) {
      ElMessage.success('匹配成功！已为你找到合适的学习小组');
    } else {
      ElMessage.error('匹配失败，请稍后再试');
    }
  } catch (error) {
    console.error('AI匹配失败：', error);
    ElMessage.error('匹配失败，请检查网络连接');
  } finally {
    ElLoading.service().close();
  }
};

const fetchRecommendedTeams = async () => {
  try {
    ElLoading.service({
      lock: true,
      text: '获取推荐小组中...',
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 0.7)'
    });

    await new Promise(resolve => setTimeout(resolve, 1000));

    recommendedTeams.value = [
      {
        id: 101,
        teamName: 'Vue.js深入学习小组',
        learnChapter: 'Vue.js框架',
        memberCount: 12,
        progress: 68
      },
      {
        id: 102,
        teamName: 'React实战项目组',
        learnChapter: 'React框架',
        memberCount: 9,
        progress: 75
      },
      {
        id: 103,
        teamName: '前端性能优化小组',
        learnChapter: 'JavaScript高级',
        memberCount: 7,
        progress: 55
      }
    ];

    ElMessage.success('获取推荐成功');
  } catch (error) {
    console.error('获取推荐小组失败：', error);
    ElMessage.error('获取推荐小组失败，请检查网络连接');
  } finally {
    ElLoading.service().close();
  }
};

const searchTeams = async () => {
  if (!searchKeyword.value.trim()) {
    ElMessage.warning('请输入搜索关键字');
    return;
  }

  try {
    ElLoading.service({
      lock: true,
      text: '搜索中...',
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 0.7)'
    });

    await new Promise(resolve => setTimeout(resolve, 800));

    searchResults.value = [
      {
        id: 201,
        teamName: `Web${searchKeyword.value}开发交流群`,
        learnChapter: `${searchKeyword.value}进阶`,
        memberCount: 15,
        progress: 70
      },
      {
        id: 202,
        teamName: `${searchKeyword.value}实战项目组`,
        learnChapter: `${searchKeyword.value}框架`,
        memberCount: 10,
        progress: 65
      }
    ];

    ElMessage.success(`搜索到 ${searchResults.value.length} 个结果`);
  } catch (error) {
    console.error('搜索失败：', error);
    ElMessage.error('搜索失败，请检查网络连接');
  } finally {
    ElLoading.service().close();
  }
};

const createTeam = async () => {
  if (!createTeamForm.value.teamName || !createTeamForm.value.learnChapter) {
    ElMessage.warning('请填写小组名称和学习章节');
    return;
  }

  try {
    ElLoading.service({
      lock: true,
      text: '创建小组中...',
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 0.7)'
    });

    await new Promise(resolve => setTimeout(resolve, 1200));

    ElMessage.success('小组创建成功！正在为你生成邀请口令');

    setTimeout(() => {
      ElMessage.success('邀请口令：ABCD-1234');
    }, 1000);
    showCreateTeamDialog.value = false;
  } catch (error) {
    console.error('创建小组失败：', error);
    ElMessage.error('创建小组失败，请稍后再试');
  } finally {
    ElLoading.service().close();
  }
};
</script>

<style scoped>
:root {
  --primary: #165DFF;
  --success: #00B42A;
}

:deep(.el-card) {
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  transition: box-shadow 0.3s, transform 0.3s;
  background: #fff;
}

:deep(.el-card:hover) {
  box-shadow: 0 16px 40px rgba(22, 93, 255, 0.12), 0 3px 8px rgba(0, 0, 0, 0.08);
  transform: translateY(-6px) scale(1.02);
}

:deep(.el-button) {
  border-radius: 999px;
  font-size: 1rem;
  padding: 0.75em 2em;
}

:deep(.el-input__inner),
:deep(.el-select),
:deep(.el-radio-group) {
  border-radius: 999px;
  min-height: 44px;
  font-size: 1rem;
}

.aaa {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
}

.section-title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: bold;
  margin-bottom: 1.5rem;
  color: var(--primary);
  letter-spacing: 1px;
}

.section-subtitle {
  font-size: 1.25rem;
  color: #666;
  margin-bottom: 2.5rem;
  opacity: 0.85;
}

.bg-section {
  background: linear-gradient(135deg, #f8faff 0%, #f3f0ff 100%);
  border-radius: 2rem;
  padding: 3rem 2rem;
  margin-bottom: 2.5rem;
}

.container {
  max-width: 1500px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 2rem;
  padding-right: 2rem;
}

@media (max-width: 768px) {
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

:deep(.el-card__body) {
  padding: 0 !important;
}

:deep(.no-padding-card .el-card__body) {
  padding: 0 !important;
}

:deep(.custom-card) {
  border-radius: 20px !important;
  /* 圆角 */
  overflow: hidden;
  /* 圆角裁切内容 */
  min-height: 480px;
  /* 统一高度，可根据实际调整 */
  display: flex;
  flex-direction: column;
  justify-content: stretch;
}

:deep(.custom-card .el-card__body) {
  padding: 0 !important;
  /* 取消内容内边距 */
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
}

.card-img-full {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  margin: 0;
  border-radius: 0 !important;
}

.card-center-content {
  min-height: 260px;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.main-action-btn {
  border-radius: 0 !important;
  font-size: 1.1rem;
  font-weight: 600;
  min-width: 160px;
  height: 48px !important;
  padding: 0 !important;
  box-shadow: 0 2px 8px rgba(22, 93, 255, 0.08);
  transition: background 0.2s, color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.create-team-card {
  background: #fff;
  border-radius: 10px;
  transition: box-shadow 0.3s, transform 0.3s;
  box-shadow: 0 2px 8px rgba(22, 93, 255, 0.04);
}
.create-team-card:hover {
  box-shadow: 0 16px 40px rgba(22, 93, 255, 0.12), 0 3px 8px rgba(0,0,0,0.08);
  transform: translateY(-6px) scale(1.02);
  border-color: #165DFF;
}
</style>